<template>
  <div class="zjypage">
    <CommonHeader :leftIcon="true" title="汇总统计"/>
    <van-tabs class="custom-tabs2" v-model:active="currentTab" @click-tab="tabSwitch">
      <van-tab v-for="tab in tabs" :title="tab.title" :border="false" :key="tab.name" :name="tab.name">

      </van-tab>
    </van-tabs>
    <div class="zjypage-search-page">
      <div class="zjypage-search-button2">全部</div>
      <div class="zjypage-search-button2">玉米</div>
      <div class="zjypage-search-button2">大豆</div>
      <div class="zjypage-search-view">
        <input class="zjypage-search-input" placeholder="输入区域/企业/品种/经营门店/种植户" type="text"
               v-model="searchText"/>
        <div class="zjypage-search-button" @click="searchButtonClick">搜索</div>
      </div>
    </div>
    <ZJYListPage v-show="currentTab == 'quyu'" :currentTab="'quyu'"/>
    <ZJYListPage2 v-show="currentTab == 'qiye'" :currentTab="'qiye'"/>
    <ZJYListPage3 v-show="currentTab == 'pz'" :currentTab="'pz'"/>
    <ZJYSearchPage v-show="searchPage" :searchVal="searchText" :serchItemClick="serchItemClick" :key="serchKey"
                   class="zjypage-viewpage1"/>
  </div>
  <van-popup
      v-model:show="showBottomDialog"
      position="bottom"
      :style="{ height: '100%' }">
    <SearchQuyuDialog v-if="dialogType==1" :dialogData="dialogData" :dilogShow="dilogShow" :key="dialogData"/>
    <SearchQuyuDialog v-else-if="dialogType==2" :dialogData="dialogData" :dilogShow="dilogShow" :key="dialogData"/>
    <SearchQiYePage v-else-if="dialogType==3" :dialogData="dialogData" :dilogShow="dilogShow" :key="dialogData"/>
    <SearchXingZhuangDialog v-else-if="dialogType==4" :dialogData="dialogData" :dilogShow="dilogShow" :key="dialogData"/>
    <SearchQuyuDialog v-else-if="dialogType==5" :dialogData="dialogData" :dilogShow="dilogShow" :key="dialogData"/>
    <SearchQuyuDialog v-else-if="dialogType==6" :dialogData="dialogData" :dilogShow="dilogShow" :key="dialogData"/>
  </van-popup>
</template>
<script setup>
import '@/views/zhuanjiyin/css/ZJYPage.css'
import "@/assets/css/tabs.css";
import ZJYListPage from '@/views/zhuanjiyin/ZJYListPage.vue';
import ZJYListPage2 from '@/views/zhuanjiyin/ZJYListPage.vue';
import ZJYListPage3 from '@/views/zhuanjiyin/ZJYListPage.vue';
import ZJYSearchPage from '@/views/zhuanjiyin/ZJYSearchPage.vue';
import SearchQuyuDialog from '@/views/zhuanjiyin/view/SearchQuyuDialog.vue';
import SearchQiYePage from '@/views/zhuanjiyin/SearchQiYePage.vue';
import SearchXingZhuangDialog from '@/views/zhuanjiyin/view/SearchXingZhuangDialog.vue';
import uiUtil from "@/util/UiUtil.js";
import {reactive, onMounted, inject, ref, markRaw, provide, watch} from "vue";

var user = JSON.parse(localStorage.getItem(uiUtil.urlPath.keys.user))
const tabs = ref(gettag());

function gettag() {
  if (3 == user.UserRoleID) {
    return [
      {name: 'qiye', title: '企业'},
      {name: 'pz', title: '品种'},
    ]
  } else {
    return [
      {name: 'quyu', title: '区域'},
      {name: 'qiye', title: '企业'},
      {name: 'pz', title: '品种'},
    ]
  }
}


const currentTab = uiUtil.ref(tabs.value[0].name)
// const currentTab = ref('cx')
console.log('currentTab=', currentTab.value)
const tabSwitch = (item) => {
  currentTab.value = item.name
  searchText.value=''
  searchPage.value=false
}
const searchPage = ref(false)
const searchText = ref('')
const serchKey = ref('');
const searchButtonClick = () => {
  if (uiUtil.isStrNull(searchText)) {
    searchPage.value = false
  } else {
    serchKey.value = uiUtil.getRandomString(18)
    searchPage.value = true
  }
}
const showBottomDialog = ref(false)
const dilogShow = () => {
  showBottomDialog.value = !showBottomDialog.value
}
const dialogType = ref(0)
const dialogData = ref({})
const serchItemClick = (item) => {
  console.log('item===',item,item.type)
  dialogData.value = item
  dialogType.value = item.type
  showBottomDialog.value = !showBottomDialog.value

}
</script>
<style scoped lang="less">

</style>